<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_选择器</title>
    <style>
        /*补充：
            div本身不占有文档流，本身是不显示的，高度是由内部元素来撑开的。
        */
        /*标签选择器*/
        /*类选择器   一组元素*/
        .xian{border: 2px solid red;width: 200px;height: 200px;}
        /*ID选择器 具有唯一性 比如：logo*/
        #div1{background-color: blue;width: 200px;height: 200px}
    /*    组合选择器*/
    /*    boder-radius 边框圆角  像素值是控制圆角的大小*/
    /*    .xian,#div1{border-radius: 100px;}*/
        #div1 div ul li {background-color: aqua}
        #ipt1{border:  1px dotted red}
        /*CSS3选择器 必须是ul子元素是第一个子元素*/
        #div1>ul li:first-child{color: yellow}
        #div1>ul li:last-child{color: darkgrey}
        #div1>ul li:nth-child(2){color: red}
    </style>
</head>
<body>
    <input type="text" id="ipt1">
    <div class="xian"></div>
    <div id="div1">
        <ul>
            <li>ul_li1</li>
            <li>ul-li2</li>
            <li>ul-li3</li>
        </ul>
        <div>
            <ul>
                <li>div-ul-li1</li>
                <li>div-ul-li2</li>
                <li>div-ul-li3</li>
            </ul>
        </div>
    </div>

</body>
</html>